<template>
<div class="user">
    <!-- <el-row>
        <el-col :span="24"> 
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row> -->
<el-row>
    <el-col :span="24">
        <el-input placeholder="请输入内容" class="search-input" >
        <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="success" plain @click="addDialogFormVisible=true">添加用户</el-button>
    </el-col>
</el-row>
<!-- 表格 -->
<el-table
    
    border
    style="width: 100%">
    <el-table-column
      type="index"
      width="50"
     >
     <el-input ></el-input>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
      <el-input ></el-input>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
      <el-input ></el-input>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
      <el-input ></el-input>
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
            <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="delBook()"></el-button>
            <el-button size="mini" type="warning" plain icon="el-icon-check"></el-button>
        </template>
    </el-table-column>
  </el-table>
  <div>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange()"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
  </div>
 <!-- 添加用户对话框 -->
  <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
    <el-form  label-width="80px"  ref="addUserForm">
        <el-form-item label="时间" prop="date">
        <el-input auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="名字" prop="name">
        <el-input auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
        <el-input auto-complete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
    </div>
</el-dialog>

<!-- 编辑用户对话框 -->
<el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
    <el-form  label-width="80px"  ref="editUserForm">
        <el-form-item label="时间" prop="date">
        <el-input  auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名字" prop="name">
        <el-input  auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
        <el-input  auto-complete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
    </div>
</el-dialog>
</div>
   
    
</template>
<script>
import {getdata} from '../mock/index.js'
import {getUserList} from '../API/index.js'
import axios from 'axios'

    export default {
        data() {
             return {
                addDialogFormVisible:false,//控制添加用户对话框显示隐藏
                //储存添加用户信息
                addFrom:{
                        date:'',
                        name:'',
                        address:''
                    },
                editDialogFormVisible: false, //控制编辑用户对话框显示隐藏
                //储存添加用户信息
                editFrom:{
                        date:'',
                        name:'',
                        address:'',
                        id:0
                },
             }
          },
        methods: {
            //初始化表格数据
           getdata(){
                
               
            },
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
             console.log(`当前页: ${val}`)
            },
            // 显示编辑用户对话框
            showEditDialog (row) {
                this.editDialogFormVisible = true
            },
            
        },
        //   tableDatas: [{
        //     id:1,
        //   date: '2016-05-01',
        //   name: '王小虎1',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //     id:2,
        //   date: '2016-05-02',
        //   name: '王小虎2',
        //   address: '上海市普陀区金沙江路 1517 弄'
        // }, {
        //     id:3,
        //   date: '2016-05-03',
        //   name: '王小虎3',
        //   address: '上海市普陀区金沙江路 1519 弄'
        // }, {
        //     id:4,
        //   date: '2016-05-04',
        //   name: '王小虎4',
        //   address: '上海市普陀区金沙江路 1516 弄'
        // }],
          
      
    }


</script>
<style>

  .margin-20 {
    margin: 20px 0;
  }
  .search-input {
    width: 300px;
  }
  .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
  
</style>
